<template>
  <div>
    <input type="text" v-focus>
    <!-- 需求 给指令传入一个颜色 让标签设置文字颜色 -->
    <div v-color="color">好好学习 </div>
    <!-- 点击按钮修改颜色 -->
    <button @click="color = 'red'">修改</button>
  </div>
</template>

<script>

export default {
  data() {
    return {
      color:'yellow'
    }
  },
  directives: {
    // 自定义一个局部指令
    color : {
      inserted(el,binding) {
          el.style.color =binding.value
      } ,
      // 指令的值发生变化后自动执行
     update(el,{value})  { //解构
      el.style.color =value
    
  }
    },
    focus : {
      inserted(el) {
          el.focus()
      } 
    }

  },
 
};
</script>

<style lang="scss" scoped>

</style>